<template>
  <view class="site-address">
    <!-- 地址列表 -->
    <view class="site-address-item" v-for="(item, index) in addressList" :key="index">
      <!-- 门店 -->
      <view class="site-name">
        <view class="site-name-label">
          <text>{{ item.label }}</text>
        </view>
        <view class="site-name-show overflow-ellipsis">{{ item.siteName }}</view>
      </view>
      <!-- 地址 -->
      <view class="site-address-show overflow-ellipsis" v-if="item.address">{{ item.address }}</view>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue'

  const emit = defineEmits(['edit'])
  const props = defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })

  /**
   * 地址列表
   */
  const addressList = computed(() => {
    // 取车门店
    const { siteName, siteId, sendServiceFlag, address } = props.record
    // 还车门店
    const { returnSiteName, returnSiteId, returnServiceFlag, returnAddress } = props.record
    // 是否是同一门店
    const isSameSite = siteId == returnSiteId && siteName == returnSiteName
    // 是否是同一地址
    const isSameAddress = address == returnAddress
    if (isSameSite && isSameAddress) {
      const label = sendServiceFlag ? '上门取/送' : '到店取/还'
      return [
        {
          label,
          siteName,
          address,
        },
      ]
    } else {
      return [
        {
          label: sendServiceFlag ? '上门送' : '到店取',
          siteName,
          address,
        },
        {
          label: returnServiceFlag ? '上门取' : '到店还',
          siteName: returnSiteName,
          address: returnAddress,
        },
      ]
    }
  })
</script>

<style lang="less" scoped>
  .site-address {
    .site-address-item {
      .site-name {
        display: flex;
        align-items: baseline;
        .site-name-label {
          height: 28rpx;
          line-height: 28rpx;
          background: #e8f7ff;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          padding: 0 8rpx;
          text {
            font-weight: 700;
            font-size: 20rpx;
            color: #3491fa;
            line-height: 28rpx;
          }
        }
        .site-name-show {
          font-weight: 600;
          font-size: 24rpx;
          color: #1d2129;
          line-height: 24rpx;
          flex: 1;
          margin-left: 8rpx;
        }
      }
      .site-address-show {
        font-size: 24rpx;
        color: #9ea5bb;
        line-height: 34rpx;
        margin-top: 10rpx;
        width: 100%;
      }
    }
    .site-address-item + .site-address-item {
      margin-top: 18rpx;
    }
  }
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
